/**
 * Canvas 样例
 * 
 * @author Gill Gong
 */

import React, { Component } from "react"
import { SafeAreaView, View, Dimensions } from "react-native"
import Canvas from "react-native-canvas"
//import console = require("console");

class CanvasView extends Component {
  static navigationOptions = () => {
    
    return {
      title: 'Canvas'
    }
  }

  constructor(options) {

    super(options)
    let { width, height } = Dimensions.get('window')

    this.width = width
    this.height = height
    this.canvasRef = React.createRef()
  }

  render() {

    return (
      <SafeAreaView>
        <View>
          <Canvas ref={this.drawCanvas.bind(this)} />
        </View>
      </SafeAreaView>
    )
  }

  drawCanvas(canvas) {

    if(canvas) {
      let contxt = canvas.getContext('2d')
      canvas.width = this.width
      canvas.height = this.height

      this.drawRect(contxt)
      this.drawCircle(contxt)
    }
  }
  
  drawRect(contxt) {
    
    contxt.save()    
    contxt.fillStyle = "#eee"
    contxt.strokeStyle = "#777"
    contxt.lineWidth = 2
    contxt.fillRect(50, 50, 200, 200)
    contxt.strokeRect(50, 50, 200, 200)
    contxt.restore()
  }

  drawCircle(contxt) {
    contxt.save()    
    contxt.fillStyle = "#333"
    contxt.strokeStyle = "#0000ff"
    contxt.lineWidth = 5
    contxt.arc(.5*this.width, .5*this.height, 100, 0, 2*Math.PI)
    contxt.stroke()
    contxt.restore()
  }
}

export default CanvasView
